<template>
    <div class="animated fadeIn">

        <Row>
            <Col :md="24">


                <div>




                    <div style="position:relative;">


                        <Table stripe border  :columns="columns7" :data="page_video_list" ref="table"></Table>

                        <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                            align-items: center;
                            justify-content: center;background: rgba(210, 216, 222, 0.5);" v-if="list_loadding">
                            <Spin size="large"></Spin>
                            <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
                        </div>
                    </div>

                    <Page :total="this.video_list.length" show-total @on-change="setInitPage"
                          style="text-align:right;margin-top:50px"></Page>


                </div>


            </Col>


        </Row>


    </div>
</template>

<script>


    export default {


        data() {
            var that = this
            return {
                device:"请选择设备型号",
                deviceList: [
                    {
                        value: 'dev1',
                        label: '设备型号1'
                    },
                    {
                        value: 'dev2',
                        label: '设备型号2'
                    },
                    {
                        value: 'dev3',
                        label: '设备型号3'
                    }

                ],
                progresshow: false,
                progresscount: 0,
                progresstatus: 'active',
                progressspeed: 0,
                video_list: [
                    {
                        task_status: 0,
                        project_name: "项目2",
                        device_number: "KDSN20180713",
                        alarm_descri: "漏电超限2",
                        device_name: "设备2",
                    },
                    {
                        task_status: 1,
                        project_name: "项目3",
                        device_number: "KDSN20180713",
                        alarm_descri: "漏电超限1",
                        device_name: "设备1",
                    },
                    {
                        task_status: 2,
                        project_name: "项目4",
                        device_number: "KDSN20180711",
                        alarm_descri: "漏电超限2",
                        device_name: "设备2",
                    },
                    {
                        task_status: 0,
                        project_name: "项目1",
                        device_number: "KDSN20180711",
                        alarm_descri: "漏电超限1",
                        device_name: "设备1",
                    },
                    {
                        task_status: 1,
                        project_name: "项目3",
                        device_number: "KDSN20180712",
                        alarm_descri: "漏电超限2",
                        device_name: "设备4",
                    },
                    {
                        task_status: 2,
                        project_name: "项目2",
                        device_number: "KDSN20180713",
                        alarm_descri: "漏电超限1",
                        device_name: "设备1",
                    },
                    {
                        task_status: 0,
                        project_name: "项目2",
                        device_number: "KDSN20180712",
                        alarm_descri: "漏电超限2",
                        device_name: "设备3",
                    },
                    {
                        task_status: 2,
                        project_name: "项目2",
                        device_number: "KDSN20180713",
                        alarm_descri: "漏电超限1",
                        device_name: "设备1",
                    },
                    {
                        task_status: 1,
                        project_name: "项目1",
                        device_number: "KDSN20180714",
                        alarm_descri: "漏电超限1",
                        device_name: "设备1",
                    },
                    {
                        task_status: 0,
                        project_name: "项目1",
                        device_number: "KDSN20180713",
                        alarm_descri: "漏电超限2",
                        device_name: "设备1",
                    },
                    {
                        task_status: 2,
                        project_name: "项目2",
                        device_number: "KDSN20180715",
                        alarm_descri: "漏电超限1",
                        device_name: "设备1",
                    },
                    {
                        task_status: 0,
                        project_name: "项目1",
                        device_number: "KDSN20180714",
                        alarm_descri: "漏电超限1",
                        device_name: "设备1",
                    }
                ],
                pageindex: 1,
                page_video_list: [],
                loadding: false,
                list_loadding: false,
                columns7: [
                    {
                        title: '项目名称',
                        ellipsis: 'true',
                        key: 'project_name',

                    },
                    {
                        title: '设备编号',
                        ellipsis: 'true',
                        key: 'device_number',
                    },

                    {
                        title: '设备名称',
                        key: 'device_name',
                        ellipsis: 'true',
                    },



                    {
                        title: '告警描述',
                        ellipsis: 'true',
                        key: 'alarm_descri',
                        filters: [
                            {
                                label: '漏电超限1',
                                value: '漏电超限1'
                            },
                            {
                                label: '漏电超限2',
                                value: '漏电超限2'
                            }
                        ],
                        filterMultiple: false,
                        filterRemote:function(value,key,column){
                            console.log(value[0] )
                            that.searchAlarmSescri(value[0])
                        }

                    },
                    {
                        title: '状态',
                        ellipsis: 'true',
                        filters: [
                            {
                                label: '正在处理',
                                value: 0
                            },
                            {
                                label: '处理完成',
                                value: 1
                            },
                            {
                                label: '等待处理',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod(value, row) {
                            if (value === 1) {
                                return row.task_status === 1;
                            } else if (value === 2) {
                                return row.task_status === 2;
                            } else if (value === 0) {
                                return row.task_status === 0;
                            }
                        },

                        render: (h, params) => {
                            const task_status = parseInt(params.row.task_status);

                            if (task_status === 0)
                                return h('div', [
                                    h('Tag', {
                                        props: {
                                            type: 'dot',
                                            color: "blue"
                                        }
                                    }, "正在处理"),
                                ]);

                            else if (task_status === 1)
                                return h('div', [

                                    h('Tag', {
                                        props: {
                                            type: 'dot',
                                            color: "green"
                                        }
                                    }, "处理完成"),
                                ]);
                            else if (task_status === 2)
                                return h('div', [

                                    h('Tag', {
                                        props: {
                                            type: 'dot',
                                            color: "yellow"
                                        }
                                    }, "等待处理"),
                                ]);
                        }
                    },

                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        ellipsis: 'true',

                        render: (h, params) => {
                            const task_status = parseInt(params.row.task_status);
                            if (task_status === 0) {
                                return h('div', [
                                    h('Tooltip', {
                                        props: {
                                            content: '还未分析完成，暂时不能查看',
                                        },
                                    }, [
                                        h('Button', {
                                            props: {
                                                type: 'primary',
                                                size: 'small',
                                                loading: true,
                                            },
                                            style: {
                                                marginRight: '5px'
                                            },
                                        }, '处理中')]),



                                ]);
                            }
                            else if (task_status === 1) {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small',
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                var that = this;
                                                this.$Notice.open({title:`处理完成` ,duration:1,onClose:function(){

                                                    }})

                                            }
                                        },
                                    }, '处理完成'),

                                ]);
                            }
                            else if (task_status === 2) {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small',
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                var that = this;
                                                this.$Notice.open({title:`正在处理` ,duration:1,onClose:function(){
                                                            that.solveAlarm(params.index)
                                                    }})

                                            }
                                        },
                                    }, '处理警告'),

                                ]);
                            }
                        }//render
                    },//{
                ],//cloumn
            }//return
        },//data
        methods: {
            remove(index) {
                 this.video_list.splice(index, 1);
                 this.setInitPage(1);
            },
            solveAlarm:function (index)  {
                this.video_list[index].task_status = 0
            },
            searchAlarmSescri:function (alarm_descri)  {
                console.log(alarm_descri)
                if(alarm_descri === undefined){
                    this.setInitPage(1)
                }else{

                    this.page_video_list = [];
                    this.page_video_list  =  this.video_list.filter(item => item.alarm_descri === alarm_descri);
                }




            },
            setInitPage(page) {

                this.page_video_list = [];
                this.pageindex = page;
                let video_list = this.video_list;
                for (let i = (page - 1) * 10; i < (page - 1) * 10 + 10; i++) {


                    if (i < video_list.length) {

                        this.page_video_list.push(this.video_list[i]);

                    }
                }
            },

        },
        mounted() {
            const vue = this;

            this.list_loadding = true;
            this.setInitPage(1);
            setTimeout(function () {
                vue.list_loadding = false;
            }, 2000)


        },
    }


</script>


<style type="text/css" scoped>
    .ivu-tag-dot {
        border: none !important;
    }

    tr.ivu-table-row-hover td .ivu-tag-dot {
        background-color: #ebf7ff !important;
    }

    .demo-i-circle-custom h1 {
        color: #3f414d;
        font-size: 10px;
        font-weight: normal;
    }

    .demo-i-circle-custom p {
        color: #657180;
        font-size: 8px;
        margin: 5px 0 2px;
    }

    .demo-i-circle-custom span {
        display: block;
        padding-top: 15px;
        color: #657180;
        font-size: 10px;
    }

    .demo-i-circle-custom span :before {
        content: '';
        display: block;
        width: 50px;
        height: 1px;
        margin: 0 auto;
        background: #e0e3e6;
        position: relative;
        top: -20px;
    }

    .demo-i-circle-custom span i {
        font-style: normal;
        color: #3f414d;
    }

    /*wz-btn wz-btn-primary wz-btn-small wz-btn-loading*/

    .ivu-btn.ivu-btn-primary.ivu-btn-small:not(.ivu-btn-loading ) {
        padding: 2px 10px !important;
    }

    td.ivu-table-expanded-cell {
        background-color: white !important;

    }
</style>



